<template>
  <div>
    <el-row style="padding-top: 20px;  margin-bottom: 10px;">
      <el-col :span="24" style="padding-right: 30px;padding-left: 40px;">
        <el-row>
          <el-col class="bot">
            <el-col :span="5">
              <el-col>
                <p class="title">需求名称</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata">{{requiredata.name}}</p>
              </el-col>
            </el-col>
            <el-col :span="5">
              <el-col>
                <p class="title">需求状态</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata">{{requiredata.status}}</p>
              </el-col>
            </el-col>
            <el-col :span="5">
              <el-col>
                <p class="title">客户简称</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata">{{requiredata.customerName}}</p>
              </el-col>
            </el-col>
            <el-col :span="4">
              <el-col>
                <p class="title">工作地点</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata">{{requiredata.addr}}</p>
              </el-col>
            </el-col>
            <el-col :span="4">
              <el-col>
                <p class="title">所属区域</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata">{{requiredata.area}}</p>
              </el-col>
            </el-col>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="bot1">
            <el-col :span="5">
              <el-col>
                <p class="title">职位名称</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata">{{requiredata.postName}}</p>
              </el-col>
            </el-col>
            <el-col :span="5">
              <el-col>
                <p class="title">职位级别</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata">{{requiredata.postLevel}}</p>
              </el-col>
            </el-col>
            <el-col :span="4">
              <el-col>
                <p class="title">职位类型</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata">{{requiredata.postType}}</p>
              </el-col>
            </el-col>
            <el-col :span="4" :offset="1">
              <el-col>
                <p class="title">需求人数</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata">{{requiredata.number}}</p>
              </el-col>
            </el-col>
            <el-col :span="5">
              <el-col>
                <p class="title">需求星级</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata">
                  <span v-if="requiredata.star == 4" style="color:#FF1C1D;">
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                </span>
                  
                  <span v-if="requiredata.star == 3" style="color:#2931FE;">
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                </span>
                  <span v-if="requiredata.star == 2" style="color:#F727FF;">
                  <i class="el-icon-star-on"></i>
                  <i class="el-icon-star-on"></i>
                </span>
                  <span v-if="requiredata.star == 1" style="color:#FFC027;">
                  <i class="el-icon-star-on"></i>
                </span>
                  <span v-if="requiredata.star == 0" style="color:#04344a;">
                  <i class="el-icon-star-off"></i>
                </span>
                </p>
              </el-col>
            </el-col>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="bot1">
            <el-col :span="5">
              <el-col>
                <p class="title">薪资上限</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata">{{requiredata.salaryCap + "k" + " " + "*" + " " +
                  requiredata.salaryNum}}</p>
              </el-col>
            </el-col>
            <el-col :span="5">
              <el-col>
                <p class="title">技术面试</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata">{{requiredata.techInterview}}</p>
              </el-col>
            </el-col>
            <el-col :span="4">
              <el-col>
                <p class="title">作息时间</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata">{{requiredata.timeTable}}</p>
              </el-col>
            </el-col>
            <el-col :span="4" :offset="1">
              <el-col>
                <p class="title">关键词</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata">{{requiredata.ordinaryKeywords}}</p>
              </el-col>
            </el-col>
            <el-col :span="5">
              <el-col>
                <p class="title">需求编号</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata">{{requiredata.no}}</p>
              </el-col>
            </el-col>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="bot1">
            <el-col :span="5">
              <el-col>
                <p class="title">发布时间</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata">{{requiredata.putTime | converTime('YYYY/MM/DD')}}</p>
              </el-col>
            </el-col>
            <el-col :span="5">
              <el-col>
                <p class="title">截止时间</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata">{{requiredata.endTime | converTime('YYYY/MM/DD')}}</p>
              </el-col>
            </el-col>
            <el-col :span="4">
              <el-col>
                <p class="title">期望到岗</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata">{{requiredata.expectTime}}</p>
              </el-col>
            </el-col>
            <el-col :span="4" :offset="1">
              <el-col>
                <p class="title">主要招聘专员</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata" style="color:#5ba6fe;">{{requiredata.hr}}</p>
              </el-col>
            </el-col>
            <el-col :span="5">
              <el-col>
                <p class="title">辅助招聘专员</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata" style="color: #50ce88;">{{requiredata.hrSup}}</p>
              </el-col>
            </el-col>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="bot1">
            <el-col :span="5">
              <el-col>
                <p class="title">面试流程</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata">{{requiredata.interviewProcess}}</p>
              </el-col>
            </el-col>
          </el-col>
        </el-row>
        <el-row class="bot1">
          <el-col v-for="(item,index) in requiredata.mails" :key="index">
            <el-col :span="5">
              <el-col>
                <p class="title">收件人邮箱</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata.mails">{{item.receiverMail}}</p>
              </el-col>
            </el-col>
            <el-col :span="5" v-for="(item1,index1) in item.cpSendMails" :key="index1">
              <el-col>
                <p class="title">抄送人邮箱</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata.mails">{{item1.mail}}</p>
              </el-col>
            </el-col>
          </el-col>
        </el-row>
        <el-row class="bot">
          <el-col :span="12">
            <el-col>
              <p class="title">职位职责</p>
            </el-col>
            <el-col :span="12">
              <div v-if="requiredata">
                <p class="text" v-for="(item,index) in requiredata.duty" :key="index">
                  {{item}}
                </p>
              </div>
            </el-col>
          </el-col>
          <el-col :span="12">
            <el-col>
              <p class="title">任职要求</p>
            </el-col>
            <el-col :span="12">
              <div v-if="requiredata">
                <p class="text" v-for="(item,index) in requiredata.require" :key="index">{{item}}</p>
              </div>
            </el-col>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import axios from 'axios'
  import qs from 'qs'
  
  export default {
    name: "demandname",
    props: {
      ID: ''
    },
    data() {
      return {
        requiredata: {}
      }
    },
    created() {
      axios.post(this.url + '/demand/getJobDetail', qs.stringify({ //职位需求明细请求
        id: this.ID
      })).then(res => {
        this.unlogin(res.data.code);
        if (res.data.code == 200) {
          this.requiredata = res.data.data;
          this.requiredata.duty = this.requiredata.duty.split(/\n/);
          this.requiredata.require = this.requiredata.require.split(/\n/);
        }
      })
    },
  }
</script>

<style scoped>
  .posttable {
    background-color: #fff;
  }
  
  .title {
    color: #757575;
    margin-bottom: 10px;
    font-size: 14px;
  }
  
  .text {
    color: #333333;
    font-weight: 700;
    font-size: 14px;
  }
  
  .bot {
    margin-bottom: 20px;
  }
  
  .bot1 {
    margin-bottom: 30px;
  }
</style>
